<template>
  <section class="goods-attribute" :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <section class="attribute-section">
      <div class="sku-row">
        <div class="row-label">已选</div>
        <div class="row-content">
          <div class="selected-sku">黑色，8G0，16kg，一件，可选服务</div>
          <i class="iconfont icon-arrow-right"></i>
        </div>
      </div>
      <div class="split-line" v-if="showAddress || showNearbyShop"></div>
      <div class="address-row" v-if="showAddress">
        <div class="row-label">送至</div>
        <div class="row-content">
          <div class="address-info">
            <i class="iconfont icon-a-map"></i>
            <span>河南省洛阳市西工区洛阳科技大学材料科技…</span>
          </div>
          <i class="iconfont icon-arrow-right"></i>
        </div>
      </div>
      <div class="send-info" v-if="showAddress">
        <div class="row-label"></div>
        <div class="row-content">
          <mark>现货</mark>
          <span>,23:00前下单，预计明天（09月23日）送达</span>
        </div>
      </div>
      <div class="split-line" v-if="showAddress && showNearbyShop"></div>
      <div class="shop-info" v-if="showNearbyShop">
        <div class="row-label">门店</div>
        <div class="row-content">
          <div class="shop-msg">
            <div class="top-msg">
              <i class="iconfont icon-store"></i>
              <span>旗舰-洛阳市金谷园店</span>
            </div>
            <i class="iconfont icon-arrow-right"></i>
          </div>
          <div class="address-detail">
            距您8.3km · 洛阳西工区金谷园路99好翡翠城1东1000…
          </div>
        </div>
      </div>
      <div class="split-line" v-if="showFreight"></div>
      <div class="freight-row" v-if="showFreight">
        <div class="row-label">运费</div>
        <div class="row-content">在线支付免运费</div>
      </div>
      <section class="ensure-section">
        <div
          class="ensure-item"
          v-for="(item, index) in [1, 2, 3, 4]"
          :key="index"
        >
          <i class="iconfont icon-success"></i>
          <span>可配送港澳台</span>
        </div>
      </section>
    </section>
  </section>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    showAddress() {
      return this.propsData.params.showAddress;
    },
    showNearbyShop() {
      return this.propsData.params.showNearbyShop;
    },
    showFreight() {
      return this.propsData.params.showFreight;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.goods-attribute {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .attribute-section {
    width: 100%;
    padding-top: 18px;
    .sku-row {
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding-left: 18px;
      .row-label {
        width: 41px;
        font-size: 13px;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        display: flex;
        align-items: flex-start;
        padding-right: 18px;
        padding-bottom: 15px;
        .selected-sku {
          flex: 1;
          font-size: 13px;
          font-weight: 400;
          color: #262626;
        }
        .iconfont {
          font-size: 15px;
          color: #000000;
        }
      }
    }
    .split-line {
      width: 84.26%;
      height: 1px;
      background: #f6f6f6;
      float: right;
    }
    .address-row {
      width: 100%;
      display: flex;
      align-items: center;
      padding-top: 18px;
      .row-label {
        width: 41px;
        font-size: 13px;
        font-weight: 600;
        color: #262626;
        flex-shrink: 0;
        margin-left: 18px;
      }
      .row-content {
        width: 84.26%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 18px;
        .address-info {
          font-size: 13px;
          font-weight: 400;
          color: #262626;
          display: flex;
          align-items: center;
          width: 93%;
          .iconfont {
            font-size: 17px;
            color: #f8260a;
            font-weight: 500;
            margin-right: 2px;
          }
          span {
            text-overflow: ellipsis;
            width: 90%;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .iconfont {
          font-size: 15px;
          color: #000000;
        }
      }
    }
    .send-info {
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 18px;
      .row-label {
        width: 41px;
        font-size: 13px;
        font-weight: 600;
        color: #262626;
        flex-shrink: 0;
      }
      .row-content {
        width: 100%;
        display: flex;
        align-items: center;
        padding-right: 18px;
        font-size: 13px;
        font-weight: 400;
        color: #262626;
        padding-bottom: 18px;
        mark {
          color: #fa230a;
          padding: 0;
          background: none;
        }
        span {
          width: 90%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .shop-info {
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding: 18px 0 10px 18px;
      .row-label {
        width: 41px;
        font-size: 13px;
        font-weight: 600;
        color: #262626;
        flex-shrink: 0;
      }
      .row-content {
        width: 84.26%;
        position: relative;
        top: -4px;
        .shop-msg {
          display: flex;
          align-items: center;
          flex: 1;
          .top-msg {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: #262626;
            .iconfont {
              font-size: 17px;
              color: #000000;
              font-weight: 500;
              margin-right: 2px;
            }
          }
        }
        .address-detail {
          font-size: 11px;
          font-weight: 400;
          width: 81%;
          color: #8c8c8c;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 19px;
        }
      }
    }
    .freight-row {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 18px 0 18px 18px;
      .row-label {
        width: 41px;
        font-size: 13px;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        display: flex;
        align-items: flex-start;
        padding-right: 18px;
        font-size: 13px;
        font-weight: 400;
        color: #262626;
      }
    }
    .ensure-section {
      width: 100%;
      padding: 10px 18px;
      display: flex;
      flex-wrap: wrap;
      background: #fbfcfb;
      .ensure-item {
        display: flex;
        align-items: center;
        margin: 1px 16px 1px 0;
        .iconfont {
          font-size: 14px;
          color: #8c8c8c;
          margin-right: 2px;
        }
        span {
          font-size: 11px;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
